<template>
  <div class="club-content-bg">
    <div class="club-content">
      <div class="img-wrap">
        <div :style="{backgroundImage: `url(${clubInfo.cover})`}" class="club-img"></div>
      </div>
      <div class="info-wrap">
        <div class="club-info">
          <p class="info-title">{{clubInfo.name}}</p>
          <div class="star">
            <span v-for="(item, index) in clubInfo.star">
              <i class="iconfont icon-star"></i>
            </span>
          </div>
          <span class="info-light" v-for="tag in clubInfo.tags">{{tag}}</span>
          <p class="info-item">开放时间：{{clubInfo.open_time}}</p>
          <p class="info-item">前台电话：{{clubInfo.phone}}</p>
          <p class="info-item">地址：{{clubInfo.location}}</p>
          <p class="info-item info-inline">开放区域：</p>
          <span class="info-tag" v-for="area in clubInfo.open_area">{{area}}</span>
        </div>
        <div class="club-info">
          <p class="info-title">场馆介绍</p>
          <p class="intro-content">{{clubInfo.desc}}</p>
        </div>
      </div>
      <router-link :to="{name: 'fillinfo', params:{clubId:`${this.$route.params.id}`, clubName:`${clubInfo.name}`}}">
        <div class="receive-btn">领取周卡</div>
      </router-link>
    </div>
    <div class="loading-pop" v-show="isLoad">
      <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div> 
  </div>
</template>

<script>

export default {
  name: 'clubdetail',
  data () {
    return {
      clubInfo: [],
      isLoad: false
    }
  },
  created () {
    this.isLoad = true
    this.$http.get(`${process.env.API}/common/clubs/${this.$route.params.id}`,
    {'headers': {'Accept': 'application/vnd.sci.v2+json'}})
    .then((response) => {
      response = response.body
      this.clubInfo = response.data
      this.isLoad = false
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import "../../common/stylus/base.styl";
@import "../../common/stylus/icon.styl"

.img-wrap
  position relative
  width 100%
  height 200px
  overflow hidden
  .club-img
    width 100%
    height 100%
    background-size cover
.info-wrap
  width 100%
  flex 1
  background #fff
  padding-bottom 2.8125rem
  overflow-y scroll
  -webkit-overflow-scrolling touch
  .club-info
    padding 20px 10px 15px 10px
    .icon-star
      color #f9a409
      font-size 1.1rem
    .info-title
      color #000
      font-size 0.9375rem
      font-weight bold
      line-height 1.8
    .star
      display flex
    .info-light
      color #a8abad
      font-size 0.75rem
      line-height 2
      padding-bottom 3px
      padding-right 3px
    .info-item
      color #484848
      font-size 0.9375rem
      line-height 1.5
    .info-inline
      display inline-block
    .info-tag
      display inline-block
      font-size 0.75rem
      background $mainColor
      color #fff
      padding 3px 6px
      border-radius 4px
      margin-right 10px
    .intro-content
      color #484848
      font-size 0.75rem
      line-height 2
      
</style>